<div class="bd-content">
    <h1 class="bd-title" id="content">图文区 - Figures</h1>
    <p class="bd-lead">展示图片及其说明</p>
    <p>如果需要显示带有标题的图像，请考虑使用<code class="highlighter-rouge">&lt;figure&gt;</code>（一种全新的玩法）。</p>
    <p>使用包含的 <code class="highlighter-rouge">.figure</code> ， <code class="highlighter-rouge">.figure-img</code> 和 <code class="highlighter-rouge">.figure-caption</code> 类为HTML5  <code class="highlighter-rouge">&lt;figure&gt;</code>  和 <code class="highlighter-rouge">&lt;figcaption&gt;</code> 元素提供一些基本样式。 <code class="highlighter-rouge">&lt;figure&gt;</code> 中的图像没有明确的大小，因此请务必将 <code class="highlighter-rouge">.img-fluid</code> 类添加到 <code class="highlighter-rouge">&lt;img&gt;</code> 以使其成为响应式设计的图像。</p>

    <div class="bd-example">
        <figure class="figure">
            <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure." />
            <figcaption class="figure-caption">A caption for the above image.</figcaption>
        </figure>
    </div>
    <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"figure"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">".../400x300"</span> <span class="na">class=</span><span class="s">"figure-img img-fluid rounded"</span> <span class="na">alt=</span><span class="s">"A generic square placeholder image with rounded corners in a figure."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;figcaption</span> <span class="na">class=</span><span class="s">"figure-caption"</span><span class="nt">&gt;</span>A caption for the above image.<span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span></code></pre></figure>

    <p>使用文本工具可以轻松对齐 <code class="highlighter-rouge">figure</code> 中标题。</p>

    <div class="bd-example">
        <figure class="figure">
            <img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure." />
            <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
        </figure>
    </div>
    <figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;figure</span> <span class="na">class=</span><span class="s">"figure"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">".../400x300"</span> <span class="na">class=</span><span class="s">"figure-img img-fluid rounded"</span> <span class="na">alt=</span><span class="s">"A generic square placeholder image with rounded corners in a figure."</span><span class="nt">&gt;</span>
  <span class="nt">&lt;figcaption</span> <span class="na">class=</span><span class="s">"figure-caption text-right"</span><span class="nt">&gt;</span>A caption for the above image.<span class="nt">&lt;/figcaption&gt;</span>
<span class="nt">&lt;/figure&gt;</span></code></pre></figure>
</div>